<style lang="scss" scoped>
    .nav{
        height: 46px;
        line-height: 46px;
        background-color: rgb(50, 134, 255);
        display: flex;
        .left,
        .leftBack{
            width: 15%;
            position: relative;
            height: 46px;
        }
        .left{
            &::after{
                position: absolute;
                content: '';
                width: 10px;
                height: 10px;
                border-bottom: 1px solid #fff;
                border-left: 1px solid #fff;
                transform: rotate(45deg);
                top: 16px;
                left: 16px;
            }
        }
        .title{
            width: 70%;
            text-align: center;
            color: #fff;
        }
        .right{
            width: 15%;
            text-align: center;
            button{
                height: 46px;
                line-height: 46px;
                background-color: rgba(0,0,0,0);
                border: 0;
                outline: 0;
                color: #fff;
                &:active{
                    color: #333 !important;
                }
            }
        }
    }
</style>
<!-- 导航栏组件 -->
<template>
    <div class="nav" :style="bgStyle">
        <!-- 左边的箭头 -->
        <div 
            @click="navBack()"
            :class="back ? 'left' : 'leftBack'">

        </div>
        <!-- 中间的标题 -->
        <div class="title">
            {{ title }}
            <!-- <slot></slot> -->
            <!-- 组件插槽 -->
        </div>
        <!-- 右边的按钮 -->
        <div class="right">
            <button v-if="btnShow" @click="submit()" :style="btnStyle">
                {{ btnText }}
            </button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            // back 定义是否显示 左箭头
            back: {
                type: Boolean,
                default: () => false
            },
            // title 定义标题的文字
            title: {
                type: String,
                default: () => ''
            },
            // btnShow 定义是否显示右边的按钮
            btnShow: {
                type: Boolean,
                default: () => false
            },
            // btnText 定义按钮里面的文字
            btnText: {
                type: String,
                default: () => '保存'
            },
            // 按钮的样式
            btnStyle: {
                type: [String,Object],
                default: () => ''
            },
            // 背景的样式
            bgStyle: {
                type: [String,Array,Object],
                default: () => ''
            }
        },
        methods: {
            navBack(){
                // 当显示左箭头的时候才让页面触发返回
                if(this.back){
                    // 通过编程式导航
                    this.$router.back();
                }
            },
            submit(){
                // 点击右边按钮才会触发的事件
                // 给父组件通知按钮被点击了
                this.$emit('click',123)
            }
        }
    }
</script>